<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅记录</title>
    <#assign path="${springMacroRequestContext.getContextPath()}">
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <style>
        /* .layui-bg-black {
            width: 240px;
        } */
        .layui-nav-item {
            margin-top: 10px;
        }
        .layui-nav-item p {
            padding: 0 20px;
        }
        .box{
            margin-bottom: 40px;
        }
        .box p {
            margin-top: 40px;
            margin-left: 20px;
        }
        .box a {
            color: white;
        }
        .box a:hover {
            color: darkgray;
        }
    </style>
</head>
<body class="layui-layout-body">
<!-- 左边导航部分 -->
<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree"  lay-filter="test">
            <div class="box">
                <p>${Session.user.userName} &nbsp (<a href="/login_out">退出</a>)</p>
                <p>${Session.user.userTrueName},你好</p>
            </div>
            <li class="layui-nav-item">
                <a href="/user/user_view">用户管理</a>
            </li>
            <li class="layui-nav-item">
                <a href="/book/book_view">图书管理</a>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="/borrowing/borrowing_view">借阅记录</a>
            </li>
        </ul>
    </div>
</div>

<!-- 内容主体区域 -->
<div class="layui-body">
    <!-- <div style="padding: 20px;">内容主体区域</div> -->
    <table class="layui-table" id="test" lay-filter="test" lay-data="{page:true, id:'test',toolbar: '#toolbarDemo'}">
        <thead>
        <tr>
            <th lay-data="{type: 'checkbox', fixed: 'left'}"></th>
            <th lay-data="{field:'borrowId', width:80, sort: true}">ID</th>
            <th lay-data="{field:'userId', width:90, sort: true}">用户ID</th>
            <th lay-data="{field:'userName', width:120, sort: true}">用户名</th>
            <th lay-data="{field:'bookId', width:90, sort: true}">图书ID</th>
            <th lay-data="{field:'bookName', width:140, sort: true}">图书名称</th>
            <th lay-data="{field:'borrowDateTime', width:180, sort: true}">借书时间</th>
            <th lay-data="{field:'returnDateTime', width:180, sort: true}">归还时间</th>
            <th lay-data="{field:'returnBook', width:130, sort: true}">归还情况</th>
            <th lay-data="{fixed: 'right',toolbar: '#barDemo', width:160}">操作</th>
        </tr>
        </thead>
        <#list borrowingList as borrowingList>
        <tr>
            <td></td>
            <td>${borrowingList.borrowId}</td>
            <td>${borrowingList.userId}</td>
            <td>${borrowingList.userName}</td>
            <td>${borrowingList.bookId}</td>
            <td>${borrowingList.bookName}</td>
            <td>${(borrowingList.borrowDateTime)?string("yyyy-MM-dd HH:mm:ss")}</td>
            <td>${(borrowingList.returnDateTime)?string("yyyy-MM-dd HH:mm:ss")}</td>
            <td>${borrowingList.returnBook}</td>
        </tr>
    </#list>
    </table>
</div>
</div>

<script src="${path}/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="select">用户查询</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //头工具栏事件
        table.on('toolbar(test)', function(obj){        //括号中的test是<table>中lay-filter的值
            var $ = layui.$
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                //新建用户
                case  'select':
                    layer.open({
                        type: 2
                        ,title:"用户查询"
                        ,content: "/borrowing/borrowing_select_w"
                        ,btn:["确定",["取消"]]
                        ,area: ['400px','600px']
                        ,cancel:function(index){
                            // table.reload();
                            layer.close(index);
                        }
                        ,yes: function(index,layero){
                            //得到form表单元素
                            let form = layero.find("iframe").contents().find("#ajaxForm");
                            let data = form.serialize()
                            location.href="/user/user_admin_select?"+data;
                        }
                    })
                    break;
                //用户查询
                case  'select':
                    layer.open({
                        type: 2
                        ,title:"查询用户"
                        ,content: "/user/user_select_w"
                        ,btn:["确定",["取消"]]
                        ,area: ['400px','600px']
                        ,cancel:function(index){
                            // table.reload();
                            layer.close(index);
                        }
                        ,yes: function(index,layero){
                            //得到form表单元素
                            let form = layero.find("iframe").contents().find("#ajaxForm");
                            let data = form.serialize()
                            location.href="/user/admin_select?"+data;


                            //ajax请求，请求地址”/book/save“
                            //     layer.close(index);//关闭弹出层
                            //     $.ajax({
                            //       type: "post",
                            //       url: "/user/select",
                            //       data: form.serialize(),
                            //       dataType: "json",
                            //       success: function (response) {
                            //         tableId.reload();//table重新加载
                            //       }
                            //     });
                        }
                    })
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var $ = layui.$
            var data = obj.data;
            console.log(data);
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //在数据库中实现删除
                    $.ajax({
                        type: "get",
                        url: "/borrowing/delete?borrowId="+data.borrowId,
                        data: "",
                        dataType: "json",
                        success: function (response) {
                            //刷新页面
                            location.reload();
                        }
                    });
                    // obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                //在数据库中实现编辑
                layer.open({
                    type: 2
                    ,title:"编辑归还情况"
                    ,content: "/borrowing/borrowing_edit?borrowId="+data.borrowId
                    ,area: ['400px','600px']
                    ,btn:["确定",["取消"]]
                    ,cancel:function(index){
                        // table.reload();
                        layer.close(index);
                    }
                    ,yes: function(index,layero){
                        //得到form表单元素
                        let form = layero.find("iframe").contents().find("#ajaxForm");
                        //ajax请求，请求地址”/category/update_view“
                        layer.close(index);//关闭弹出层
                        $.ajax({
                            type: "post",
                            url: "/borrowing/update",
                            data: form.serialize(),
                            dataType: "json",
                            success: function (response) {
                                //刷新页面
                                location.reload();
                            }
                        });
                    }
                })
            }
        });
    });
</script>
</body>
</html>